
@import "../../../_public/less/_core.less";

/**
 * 卡片类
 */
.cardShadow(){
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

/**实验室列表**/
.labsList {
	padding: 40px 0;
}
.lab_item {
	position: relative;
    display: block;
	max-width: 340px;
	margin: 0 auto 20px;
    overflow: hidden;
	.cardShadow();
    .cover{
        width: 100%;
        height: 240px;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center center;
        i{
            display: none;
        }
    }
	.info {
        bottom: -30px;
        width: 100%;
        height: 100px;
        background: #fff;
        .title {
            padding: 15px 10px 0;
            line-height: 20px;
            font-weight: normal;
            color: #333;
            font-size: 20px;
            text-align: center;
        }
		p {
            padding: 10px 10px 20px;
			color: #333;
			font-size: 12px;
			opacity: 0.7;
			line-height: 16px;
			text-indent: 2em;
			text-align: justify
		}
	}
}
@media(max-width:650px){
	.lab_item{
        .info{
            height: auto;
		}
	}
	
}
@media(min-width:1024px){
	.lab_item{
        .cover{
            height: 300px;
            line-height: 240px;
            text-align: center;
            &:before{
                content: '';
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                background: #000;
                opacity: 0;
                .transition(0.15s,ease-out);
                .transition-delay(.06s);
            }
            i{
                display: inline-block;
                position: relative;
                opacity: 0;
                text-align: center;
                font-size: 80px;
                color: #fff;
                .transform(scale(1.6));
                .transition(0.15s,ease-out);
                .transition-delay(.06s);
            }
        }
        .info{
            position: absolute;
            height: auto;
            opacity: 0;
            .transition(0.15s,ease-out);
            .transition-delay(.06s);
        }
        &:hover{
            .cover{
                &:before{
                    opacity: .4;
                }
                i{
                    opacity: 1;
                    .transform(scale(1));
                }
            }
            .info{
                opacity: 1;
                bottom: 0;
            }
        }
	}
}